<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./assets/bootstrap3/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="./assets/bootstrap-select/css/bootstrap-select.min.css"/>
<link rel="stylesheet" type="text/css" href="./assets/bootstrap-table/bootstrap-table.min.css" />
<script type="text/javascript" src="./assets/jquery/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./assets/bootstrap3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./assets/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="./assets/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="./assets/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.selectpicker').selectpicker({
			actionsBox : false,
			multipleSeparator : '、',
			noneSelectedText : '请选择',
			size: 8
		});
		
		
		$('#tb_departments').bootstrapTable({
	        url: './testService',         //请求后台的URL（*）
	        method: 'get',                      //请求方式（*）
	        dataType: "json",
	        //toolbar: '#toolbar',                //工具按钮用哪个容器
	        striped: true,                      //是否显示行间隔色
	        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	        pagination: true,                   //是否显示分页（*）
	        sortable: false,                     //是否启用排序
	        sortOrder: "asc",                   //排序方式
	        queryParams: function(params) {
	        	return params;
	        },//传递参数（*）
	        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	        pageNumber:1,                       //初始化加载第一页，默认第一页
	        pageSize: 5,                       //每页的记录行数（*）
	        pageList: [5, 10],        //可供选择的每页的行数（*）
	        search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
	        //strictSearch: true,
	        //showColumns: true,                  //是否显示所有的列
	        showRefresh: true,                  //是否显示刷新按钮
	        minimumCountColumns: 2,             //最少允许的列数
	        //clickToSelect: true,                //是否启用点击选中行
	        height: 300,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	        //uniqueId: "synonymsId",                     //每一行的唯一标识，一般为主键列
	        showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
	        cardView: false,                    //是否显示详细视图
	        detailView: false,                   //是否显示父子表
	        /*responseHandler:function (res) {
	            return res;
	        },*/
	        columns: [{
	            field: 'synonymsName',
	            title: '同义词名称'
	        }, {
	            field: 'englishName',
	            title: '英文名称'
	        }]
	    });
		
		
	});
	function trigger1() {
		alert($(".selectpicker").val());
	}
	function trigger2() {
		var str='MINUTE,YEAR,OTHER';
	    var arr=str.split(',');
	    $('.selectpicker').selectpicker('val', arr);
	}
</script>
</head>
<body>
	<table id="tb_departments"></table>
	<form class="form-horizontal">
		<select name="dataExchangeCycle" class="selectpicker form-control" multiple>
			<option value="IMMEDIATELY">秒</option>
			<option value="MINUTE">分</option>
			<option value="HOUR">时</option>
			<option value="DAY">天</option>
			<option value="WEEK">周</option>
			<option value="MONTH">月</option>
			<option value="QUARTER">季</option>
			<option value="YEAR">年</option>
			<option value="MANUALTRIGGER">手动触发</option>
			<option value="AUTOTRIGGER">自动触发</option>
			<option value="OTHER">其他</option>
		</select>
		<button type="button" class="btn btn-primary btn-sm" onclick="trigger1()">get</button>
		<button type="button" class="btn btn-primary btn-sm" onclick="trigger2()">set</button>
	</form>
</body>
</html>